<template>
    <view>
        <van-tabs nav-class="nav-class" custom-class="custom-class" :active="active" @change="onChange"
            title-active-color="#333333" title-inactive-color="#999999">
            <van-tab title="服务订单">
                <view>
                    <view class="detail-container" @tap="onSelectHair">
                        <view class="centers">
                            <view class="text1">选择美发师</view>
                        </view>
                        <view class="centers">
                            <picker @change="onChangeHair" value="0" :range="hairList" range-key="stylistName">
                                <view :class="serverhair != '请选择服务的美发师' ? 'input' : 'placeholder-class'">{{
                                    serverhair
                                }}</view>
                            </picker>
                            <image class="icon-36" :src="imgUrl + 'right.png'"></image>
                        </view>
                    </view>
                    <view class="detail-container" @tap="onSelectServices">
                        <view class="centers">
                            <view class="text1">选择服务</view>
                        </view>
                        <view class="centers">
                            <input type="text" :disabled="true" placeholder="请选择服务类型"
                                placeholder-class="placeholder-class" v-model="services" />
                            <image class="icon-36" :src="imgUrl + 'right.png'"></image>
                        </view>
                    </view>
                    <view class="detail-container">
                        <view class="centers">
                            <view class="text1">服务金额</view>
                        </view>
                        <view>
                            <input type="digit" placeholder="请输入服务价格" placeholder-class="placeholder-class"
                                v-model="serverprice" @input="handleServerPrice" />
                        </view>
                    </view>
                    <view class="detail-container pd-tb-30">
                        <view class="detail">
                            <view class="text-1">备注</view>
                            <textarea class="textarea-1" type="text" placeholder="请输入备注内容"
                                placeholder-class="textarea-placeholder" maxlength="10" v-model="servercontent"
                                @input="handleServerInput"></textarea>
                            <text class="wordLimit">{{ servertextLength > 10 ? 10 : servertextLength }}/10</text>
                        </view>
                    </view>
                    <view class="savebtn" @tap="onSaveServer">生成二维码</view>
                </view>
            </van-tab>
            <van-tab title="助理耗材">
                <view class="detail-container">
                    <view class="centers-f">
                        <view class="text1">服务价格</view>
                        <input type="digit" placeholder="输入服务价格" placeholder-class="placeholder-class" v-model="price"
                            @input="handlePrice" />
                    </view>
                </view>
                <view class="detail-container">
                    <view class="centers detail">
                        <view class="text1">备注</view>
                        <textarea class="textarea" type="text" placeholder="请输入当面付内容"
                            placeholder-class="textarea-placeholder" :maxlength="max" v-model="content"
                            @input="handleContentInput" maxlength="10"></textarea>
                        <text class="wordLimit">{{ textLength > 10 ? 10 : textLength }}/10</text>
                    </view>
                </view>
                <view class="savebtn" @tap="onSave">保存</view>
            </van-tab>
        </van-tabs>
    </view>
</template>

<script>
const app = getApp(); // 引入app

const _request = require('../../utils/request.js'); // 引入require;

export default {
    data() {
        return {
            content: '',
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            services: '',
            storeId: '',
            servicesid: '',
            price: '',
            content: '',
            servercontent: '',
            serverprice: '',
            servertextLength: 0,
            textLength: 0,
            active: '',
            max: 60,
            hairList: [],
            serverhair: '请选择服务的美发师',
            serverhairid: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        // 获取门店服务美发师
        this.getStoreAllStylistById();
    },
    methods: {
        // 获取美发师
        onChangeHair(event) {
            this.setData({
                serverhair: this.hairList[event.detail.value].stylistName,
                serverhairid: this.hairList[event.detail.value].stylistId
            });
        },

        // 服务金额
        handleServerPrice(e) {
            var text = e.detail.value;

            if (text > 99999.99) {
                text = '99999.99';
            }

            var reg = /^(\.*)(\d+)(\.?)(\d{0,2}).*$/g;

            if (reg.test(text)) {
                //正则匹配通过，提取有效文本
                text = text.replace(reg, '$2$3$4');
            } else {
                text = '';
            }

            return text;
        },

        // 服务项目
        handleServerInput(event) {
            this.setData({
                servertextLength: event.detail.value.length
            });
        },

        // 选择服务
        onSelectServices() {
            uni.navigateTo({
                url: '/pages/selectservices/index',
                success: (res) => {
                    res.eventChannel.emit('acceptData', {
                        servicesid: this.servicesid
                    });
                }
            });
        },

        // 规则
        onRule() {
            const { serverhair, services, serverprice } = this;

            if (!serverhair) {
                uni.showToast({
                    title: '请选择美发师',
                    icon: 'none',
                    duration: 1000
                });
                return false;
            } else if (!services) {
                uni.showToast({
                    title: '请选择服务',
                    icon: 'none',
                    duration: 1000
                });
                return false;
            } else {
                return true;
            }
        },

        // 获取门店服务美发师
        getStoreAllStylistById() {
            _request
                .get('/storeStylist/getStoreAllStylistById', {
                    storeId: uni.getStorageSync('storeId')
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        this.setData({
                            hairList: res.data.data.map((item) => {
                                item.stylistName = item.stylistName + '（' + (item.nexus == 0 ? '网约' : '店内') + '）';
                                return item;
                            })
                        });
                    }
                });
        },

        // 生成服务订单
        onSaveServer() {
            const { servercontent, serverprice, servicesid, serverhairid, serverhair } = this;

            if (!serverhairid) {
                uni.showToast({
                    title: '请选择美发师',
                    icon: 'none',
                    duration: 2000
                });
                return;
            }

            if (!servicesid) {
                uni.showToast({
                    title: '请选择服务',
                    icon: 'none',
                    duration: 2000
                });
                return;
            }

            const exp = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;

            if ((serverprice && !exp.test(serverprice)) || serverprice == '0') {
                uni.showToast({
                    title: '请输入正确的金额',
                    icon: 'none',
                    duration: 2000
                });
                return;
            }

            if (this.onRule()) {
                _request
                    .postObj('/stylistUser/getOrderQrCode', {
                        storeId: uni.getStorageSync('storeId'),
                        stylistId: serverhairid,
                        tradePayAmount: serverprice,
                        serviceName: servicesid.join(),
                        remark: servercontent
                    })
                    .then((res) => {
                        if (res.data.code == 200) {
                            this.setData({
                                serverprice: '',
                                servercontent: '',
                                services: '',
                                serverhair: '请选择服务的美发师',
                                servertextLength: 0,
                                servicesid: ''
                            });
                            uni.navigateTo({
                                url: '/pages/person/showcode/index?price=' + serverprice + '&img=' + res.data.data
                            });
                        } else {
                            uni.showToast({
                                title: res.data.message || '二维码生成失败',
                                icon: 'none',
                                duration: 2000
                            });
                        }
                    });
            }
        },

        // 获取tab下标
        onChange(event) {
            console.log(event.detail.name);
            this.setData({
                active: event.detail.name
            });
        },

        handlePrice(e) {
            var text = e.detail.value;

            if (text > 99999.99) {
                text = '99999.99';
            }

            var reg = /^(\.*)(\d+)(\.?)(\d{0,2}).*$/g;

            if (reg.test(text)) {
                //正则匹配通过，提取有效文本
                text = text.replace(reg, '$2$3$4');
            } else {
                text = '';
            }

            return text;
        },

        handleContentInput(event) {
            this.setData({
                textLength: event.detail.value.length
            });
        },

        onSave: function () {
            let price = this.price;

            if (!price) {
                uni.showToast({
                    title: '服务价格不能为空',
                    icon: 'none',
                    duration: 2000
                });
                return;
            } else {
                const exp = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;

                if (!exp.test(price)) {
                    uni.showToast({
                        title: '请输入正确的金额',
                        icon: 'none',
                        duration: 2000
                    });
                    return;
                }
            }

            _request
                .postObj('/stylistUser/getQrCode', {
                    storeId: uni.getStorageSync('storeId'),
                    tradePayAmount: this.price,
                    remark: this.content
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        this.setData({
                            price: '',
                            content: '',
                            textLength: 0
                        });
                        uni.navigateTo({
                            url: '/pages/person/showcode/index?price=' + price + '&img=' + res.data.data
                        });
                    }
                });

            return;
        },

        onSelectHair() {
            console.log('占位：函数 onSelectHair 未声明');
        }
    }
};
</script>
<style>
.detail-container {
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    margin: 20rpx;
    padding: 30rpx;
    border-radius: 5rpx;
    align-items: center;
    justify-content: space-between;
}

/* .detail-container image {
  position: fixed;
  right: 50rpx;
} */

.text1 {
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    width: 200rpx;
}

.text-1 {
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    width: 100%;
    padding-left: 20rpx;
}

input {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: right;
}

.detail {
    padding-top: 10rpx;
}

.detail>.text1 {
    position: relative;
    top: -72rpx;
}

.textarea {
    height: 180rpx;
    width: 450rpx;
    font-size: 32rpx;
    color: #999;
    text-align: right;
}

.textarea-1 {
    height: 200rpx;
    width: 670rpx;
    font-size: 32rpx;
    color: #999;
    background: #f9f9f9;
    border-radius: 4px;
    padding: 20rpx;
    margin: 20rpx;
    box-sizing: border-box;
}

.textarea-placeholder {
    font-size: 32rpx;
    color: #999999;
    text-align: right;
}

.placeholder-class {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
}

.savebtn {
    width: 690rpx;
    height: 90rpx;
    background: #ff8722;
    border-radius: 45rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #f3f3f3;
    line-height: 90rpx;
    text-align: center;
    margin: 300rpx 30rpx 0 30rpx;
    position: fixed;
    bottom: 50rpx;
}

.wordLimit {
    color: #999;
    font-size: 34rpx;
    position: absolute;
    bottom: 20rpx;
    right: 60rpx;
}

page {
    background-color: #fbfbfb;
}

.pd-tb-30 {
    padding: 30rpx 0;
}

.centers-f {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 651rpx;
    justify-content: space-between;
}

/deep/.van-tabs__line {
    width: 80rpx !important;

}
</style>
